/*
 * @Author: your name
 * @Date: 2020-11-21 14:32:12
 * @LastEditTime: 2020-11-25 10:42:27
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \ReactDemo-技术胖\demo01\src\XiaojiejieItem.js
 */


import React, { Component } from 'react';
// 业务逻辑 校验,在子组件引入并进行校验
import PropTypes from 'prop-types'//一个团队看 写成这样PropTypes
class XiaojiejieItem extends Component {

    constructor(props) {
        super(props)
        this.handleClick=this.handleClick.bind(this)
    }//绑定好了
    // state = {  }

    // 满足两个条件：1-组件第一次存在于虚拟DOM中 ，函数不会执行 2-如果已经存在于DOM中，函数才会被执行(发生变化时)
    /*componentWillReceiveProps() {
        console.log('child--componentWillReciveProps---');
    }*/
 
    /*componentWillUnmount() {
        console.log('child---componentWillUnmount 组件被删除之前 被执行');
    }*/

    // 组件优化 项目经验不足，高手都会进行组件的完美的性能优化，to do例子
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.content !== this.props.content) {
            return true;
        } else {
            return true;
        }
    }
    render() { 
        console.log('child-render');
        return ( 
            // 在constructor中绑定 对于性能优化会有很好的效果
            <li onClick={this.handleClick}>
               {this.props.avname} 支持相信{this.props.content}
            </li>
         );
    }

    handleClick() {
        // console.log(this.props.index);
        //没有绑定
        // this.state.list = [] 1 单向数据流 不能改变，为什么设计这个呢？当父组件中调用了很多次的话，都改变了子组件的值，所以很正常
        this.props.deleteItem(this.props.index)//进行接收
    }
}
 
XiaojiejieItem.propTypes = {
    avname:PropTypes.string.isRequired,
    content: PropTypes.string,
    index: PropTypes.number,
    deleteItem:PropTypes.func
}//进行校验
XiaojiejieItem.defaultProps = {
    avname:'三叶'
}
export default XiaojiejieItem;
//相当于一个子组件
//我们通过 属性传值方法 不能直接操作父组件数据，通过传值的方法 再传给子组件，改变子组件的值（非常重要）
// 3 函数式编程 优点： 1 代码非常清晰2-对于测试很方便（更容易实现测试）


// 本实例存在性能问题 一个组件渲染全部都渲染，会变卡
